<template>
    <div class="settleStep flex_row">
        <div class="step-image flex_row">
            <div class="step-image-item flex_row" v-for="(item, index) in stepList" :key="index">
                <image class="step-icon" :src="imgPath(item.icon + (step >= index ? '_active' : '') + '.png')"></image>
                <div class="line" :class="[step >= index ? 'bgc_fecb01' : 'bgc_b2b9cd']" v-if="index != (stepList.length - 1)"></div>
            </div>
        </div>
        <div class="step-word flex_row">
            <text class="word" v-for="(item, index) in stepList" :key="index" :class="[step >= index ? 'col_fecb01' : 'col_b2b9cd']">{{item.name}}</text>
        </div>
    </div>
</template>

<script>
export default {
  name: 'settleStep',
  props: ['step'],
  data () {
    return {
      stepList: [
        {
          icon: 'create',
          name: '创建企业'
        },
        {
          icon: 'editor',
          name: '资料填写'
        },
        {
          icon: 'authenticate',
          name: '实名认证'
        }
      ]
    }
  }
}
</script>

<style>
    .col_b2b9cd {
        color: #b2b9cd;
    }
    .col_fecb01 {
        color: #fecb01;
    }
    .bgc_b2b9cd {
        background-color: #b2b9cd;
    }
    .bgc_fecb01 {
        background-color: #fecb01;
    }
    .flex_row {
        flex-direction: row;
    }
</style>
<style scoped>
    .settleStep {
        padding-top: 40px;
        padding-bottom: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .step-image {
        margin-bottom: 8px;
        justify-content: center;
    }
    .step-image-item {
        align-items: center;
    }
    .step-icon {
        width: 60px;
        height: 60px;
    }
    .line {
        width: 132px;
        height: 1px;
    }
    .step-word {
        width: 470px;
        justify-content: space-between;
    }
    .word {
        line-height: 28px;
        font-size: 22px;
    }
</style>
